<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Test For DataU</title>
    <script type="text/javascript" src="/js/jquery-1.11.3.js"></script>
    <link href="/css/globle.css" rel="stylesheet"/>

    <SCRIPT language="javascript" charset="utf-8">


        function addLink() {
            var link = $("#links_module").html();
            $("#links").append(link);
        }



        /**
         * 移动select的部分内容,必须存在value，此函数以value为标准进行移动
         * oSourceSel: 源列表框对象
         * oTargetSel: 目的列表框对象
         */
        function moveSelected(oSourceSel, oTargetSel) {
            //建立存储value和text的缓存数组
            var arrSelValue = new Array();
            var arrSelText = new Array();
            var arrSelName = new Array();
            //此数组存贮选中的options，以value来对应
            var arrValueTextRelation = new Array();
            var index = 0;//用来辅助建立缓存数组

            //存储源列表框中所有的数据到缓存中，并建立value和选中option的对应关系
            for (var i = 0; i < oSourceSel.options.length; i++) {
                if (oSourceSel.options[i].selected) {
                    arrSelValue[index] = oSourceSel.options[i].value;
                    arrSelText[index] = oSourceSel.options[i].text;
                    //建立value和选中option的对应关系
                    arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];
                    index++;
                }
            }

            //增加缓存的数据到目的列表框中，并删除源列表框中的对应项
            for (var i = 0; i < arrSelText.length; i++) {
                var oOption = document.createElement("option");
                oOption.text = arrSelText[i];
                oOption.value = arrSelValue[i];
                $(oOption).attr("selected", "selected");
                oTargetSel.add(oOption);
                //删除源列表框中的对应项
                //oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
            }
        }


        /**
         * 移动select的全部内容
         */
        function moveAll(oSourceSel, oTargetSel) {
            //建立存储value和text的缓存数组
            var arrSelValue = new Array();
            var arrSelText = new Array();

            //存储所有源列表框数据到缓存数组
            for (var i = 0; i < oSourceSel.options.length; i++) {
                arrSelValue[i] = oSourceSel.options[i].value;
                arrSelText[i] = oSourceSel.options[i].text;
            }

            //将缓存数组的数据增加到目的select中
            for (var i = 0; i < arrSelText.length; i++) {
                var oOption = document.createElement("option");
                oOption.text = arrSelText[i];
                oOption.value = arrSelValue[i];
                oTargetSel.add(oOption);
            }

            //清空源列表框数据，完成移动
            //oSourceSel.innerHTML = "";
        }


        /**
         * 删除选定项
         */
        function deleteSelectItem(oSelect) {
            for (var i = 0; i < oSelect.options.length; i++) {
                if (i >= 0 && i <= oSelect.options.length - 1
                    && oSelect.options[i].selected) {
                    oSelect.options[i] = null;
                    i--;
                }
            }
        }

        //删除右边所有数据
        function deleteRightItem(valueRight) {
            valueRight.innerHTML = "";
        }
        //过滤重复项
        function unique(data) {
            data = data || [];
            var a = new Array();
            len = data.length;
            for (var i = 0; i < len; i++) {
                var v = data[i];
                if (typeof a[v] == 'undefined') {
                    a[v] = 1;
                }
            }
            data.length = 0;
            lengt = 0;
            for (var i in a) {
                data[lengt++] = i;
            }
            return data;
        }

        function check() {
            var s = $("#servers").text();
            var p = $("#projects").text();
            if (s==="") {
                alert("您没有选择任何服务器");
                return false;
            }
            if (p==="") {
                alert("您没有选择任何项目");
                return false;
            }
        }
    </SCRIPT>
</head>
<body>

<div th:include="header"></div>
<br>

<form action="/load/program" method="post">

    <h4>请选择需要负载方案分配的机器</h4>
    <table>
        <tr>
            <td>
                <SELECT name="server_left" size="10" multiple style="width:192px;"
                        ondblclick="moveSelected(document.all.server_left,document.all.servers)">//双击移动到右边
                    <OPTION th:each="s:${servers}" th:value="${s.id}" th:text="${s.type.name}+'--'+${s.ip}">服务器ip</OPTION>

                </SELECT>
            </td>
            <td WIDTH='83PX' align='center'>
                <INPUT type="button" value="   >   "
                       onClick="moveSelected(document.all.server_left,document.all.servers)"><br><br>
                <INPUT type="button" value="   <   " onClick="deleteSelectItem(document.all.servers)"> <br><br>
                <INPUT type="button" value="  <<<  " onClick="deleteRightItem(document.all.servers)">
            </td>
            <td>
                <SELECT id="servers" name="servers" size="10" multiple style="width:192px; "></SELECT>
            </td>
        </tr>
    </table>

    <h4>请选择需要负载方案分配的项目</h4>
    <table>
        <tr>
            <td>
                <SELECT name="project_left" size="15" multiple style="width:192px;"
                        ondblclick="moveSelected(document.all.project_left,document.all.projects)">//双击移动到右边
                    <OPTION th:each="p:${projects}" th:value="${p.id}" th:text="${p.name}">项目名称
                    </OPTION>

                </SELECT>
            </td>
            <td WIDTH='83PX' align='center'>
                <INPUT type="button" value="   >   "
                       onClick="moveSelected(document.all.project_left,document.all.projects)"><br><br>
                <INPUT type="button" value="   <   " onClick="deleteSelectItem(document.all.projects)"> <br><br>
                <INPUT type="button" value="  <<<  " onClick="deleteRightItem(document.all.projects)">
            </td>
            <td>
                <SELECT id="projects" name="projects" size="15" multiple style="width:192px; "></SELECT>
            </td>
        </tr>
    </table>

    <h4>请选择初始化定死的分配</h4>

    <button type="button" onclick="addLink()">增加</button>

    <div id="links_module" hidden="hidden">
        <select name="linkedServers">
            <OPTION th:each="s:${servers}" th:value="${s.id}" th:text="${s.type.name}+'--'+${s.ip}">服务器ip
            </OPTION>
        </select>
        ---
        <select name="linkedProjects">
            <OPTION th:each="p:${projects}" th:value="${p.id}" th:text="${p.name}">项目名称
            </OPTION>
        </select>
        <br>
    </div>

    <div id="links"></div>


    <br>

    <input type="submit" onclick="return check()" value="开始分配" class="btn blue">

</form>

</body>
</html>